<template>
	<div class="home">
		<Swiper :images="images" :styles="{ backgroundColor: 'blue' }" />
		<!-- <button @click="onClick">点击出现</button>
		 -->
		<div class="van-swipe">
			<div class="van-nr">
				<div><img src="../../public/img/cmd1.png" /></div>
				<div>签到</div>
			</div>
			<div class="van-nr">
				<div><img src="../../public/img/cmd2.png" /></div>
				<div>礼券</div>
			</div>
			<div class="van-nr">
				<div><img src="../../public/img/cmd4.png" /></div>
				<div>砍价</div>
			</div>
			<div class="van-nr">
				<div><img src="../../public/img/cmd3.png" /></div>
				<div>专栏</div>
			</div>
			
		</div>
		<div class="qmkj_nr" @click="Bargaining">
			<div class="qmkj_bt">全民砍价<img src="../../public/img/zuojiantou.png" /></div>
			<!-- xxx -->
			<div class="qmkj_comlist"
			v-for="(item,index) in list" :key='index'
			v-show="item.id>99761"
			>
			<div class="qmkj_left">
				<img :src="item.pic" />
			</div>
			<div class="qmkj_button">
				<p>{{item.name}}</p>
				<p style="color: gray;">{{item.characteristic}}</p>
				<ul >
					<li><span style="color: red;">{{item.minPrice}}</span><br>
						<span style="font-size: 8px;">低价</span>
					
					
					</li>
					<li><span>{{item.originalPrice}}</span><br>
						<span style="font-size: 8px;">原价</span>
					</li>
					<li>
						<span>{{item.stores}}</span><br>
							<span style="font-size: 8px;">限量</span>
					</li>
				</ul>
			</div>
			</div>
		</div>
		<div class="product_qmkj" >
					<div>精选主题<img slot='icon' src="http://localhost:8080/img/zuojiantou.png"/></div>
				</div>
			<div class="chosen-container">
			             <div class="chosen-swiper">
			                 <div  class="a" v-for="(item,index) in thebarlist" :key='index'  @click="specia(item)">
								 <img :src='item.pic'>
								 <div class="item_a">
									<p> {{item.title}}</p><br />
									 {{item.descript}}
								 </div>
			                     
					
			                 </div>
			   
			             </div>
			         </div>
					 
	 
		<div class="rqtj">
		<div class="product_qmkj" >
			<div>精品推荐<img slot='icon' src="http://localhost:8080/img/zuojiantou.png"/></div>
		</div>
		<div class="rqtj_hezi">
			<div class="rqtj_nr" v-for="(item,index) in rqtj" :key='index'  @click="recommend(item)">
				<img  :src="item.pic"/>
				<p>{{item.name}}</p>
				<p style="color: red">{{item.minPrice}}</p>
			</div>
		</div>
		</div>
		<div class="kong"></div>
	</div>
</template>

<script>
import Swiper from '../components/swiper/Swiper.vue'; //引入swiper
export default {
	data(){
		return{
			images:[
			'https://cdn.it120.cc/apifactory/2018/11/07/76d9a2c2bd56c4ac0497b5d360c6bc06.png',
			'https://cdn.it120.cc/apifactory/2018/11/06/1a6dc56d16dcec64639d9ea624ebdd46.jpg',
			"https://cdn.it120.cc/apifactory/2018/11/07/ad7e06f98e8910ff789b6e577b36c20b.jpg"
			],
			list:[],
			thebarlist:[],
			rqtj:[]
		}
	},
	components: {
		Swiper
	},
	mounted() {
		this.$APIurl
			.register()
			.then(res => {
				this.list=res.data.data.goodsMap
				
				
			})
			this.$APIurl
				.special()
				.then(res => {
					this.thebarlist=res.data.data
				}),
		this.$APIurl.jptj().then((res)=>{
			this.rqtj=res.data.data.slice(5,11)
	
		})
	},
	methods: {
		onClick() {
			this.$loading();
		},
		Bargaining(){
			this.$router.push({ path:"/Bargaining"}); 
		},
		specia(item){
			console.log(item)
			 this.$router.push({path:'/special',query:{id:item.id}})
		},
		recommend (item){
			this.$router.push({path:'/recommend',query:{id:item.id}})
		}
		
	}
};
</script>
<style scoped>
	.van-swipe{
		width: 100%;
		height: 80px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.kong{
		width: 100%;
		height: 3.2rem;
		}
	.van-nr img{
		width: 30px;
		height: 30px;
	}
	.van-nr{
		width: 33%;
		text-align: center;
	}
	.qmkj_nr{
		width: 100%;
	}
	.qmkj_bt{
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
	}
	.qmkj_bt img{
		width: 15px;
		height: 15px;
	}
	.qmkj_comlist{
		width: 100%;
		height: 140px;
		display: flex;
		margin-top: 5px;
	}
	.qmkj_left{
		width: 37%;
		height: 140px;
	
	}
	.qmkj_left img{
		width: 100%;
		height: 140px;
	}
	.qmkj_button{
		width: 73%;
		height: 140px;
	
	}
		.qmkj_button p{
		font-size: 13px;
	}
	.qmkj_button ul{
		display: flex;
	}
	.qmkj_button ul li{
		width: 50px;
		height: 50px;
		margin-top: 10px;
		margin-left: 20px;
		font-size: 15px;
	}
	.product_qmkj{
		width: 100%;
		height: 30px;
		display: inline-flex;
		justify-content:space-around;
		align-items: center;
		font-size: 18px;
		
	}
	.product_qmkj img{
		width: 12px;
		height: 12px;
	}
	.nr{
		width: 100%;
	}
	.nr_hz{
		width: 100%;
		display: flex;
	}
	.nr_hz .lest{
		width: 35%;
		
	}
	.nr_hz .lest img{
		width: 100%;
		height: 130px;
	}
	.nr_hz  .reight{
		width: 65%;
	}
	.bt{
		margin-left: 10px;
		font-size: 15px;
	}
	.js{
		font-size: 10px;
		margin-left: 10px;
		color: gray;
	}
	.jg ul{
		display: flex;
	}
	.jg li{
		font-size: 14px;
		margin-left: 60px;
	}
	
	
	.kong{
		width: 100%;
		height: 3.2rem;
	}
	
	
	
	.chosen-container{
	    overflow: auto;
		width: 100%;
		height: 13rem;
	}
	.chosen-swiper{
	    display: -moz-box; 
	    display: -webkit-box; 
	    display: box;
	}
	.chosen-swiper .a{
	    position: relative;
	    display:block!important;
	    width: 16rem;
	    height: 13rem;
	    background-size: cover;
	    text-decoration: none;
		margin-right: 10px;
		font-size: 10px;
	}
	.item_a{
		width: 100%;
		height: 44px;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		
	}
	.chosen-swiper img{
		width: 16rem;
		height: 10rem;
	}
	.rqtj{
		width: 100%;
	}
	.rqtj_hezi{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.rqtj_nr{
		width: 47%;
		margin-right: 8px;
		font-size: 10px;
	}
	.rqtj_nr img{
		width: 100%;
		height: 300px;
	}
</style>
